@charset "UTF-8";

/**
 * @desc 辅助类
 * @author 大志
 * @update kyle
 * @date 2019-07-31
 * @inrto 包含以下类别辅助css
 *   外边距margin，内边距padding，文本相关，垂直对齐，浮动相关，定位相关，盒模型
 *   弹性盒模型，背景相关，圆角，宽高100%，不可用状态，元素居中，三角箭头
 */

/* 字体
---------------------------------------------------------------- */
body {
  font-family: PingFangSC-Medium, PingFang SC;
}

/* 透明度
---------------------------------------------------------------- */
.opacity-1 {
  opacity: 0.1;
}

/* 1px 边框
 * 为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
---------------------------------------------------------------- */

.ht,
.hb {
  @extend %hairline-basic;
  &:before {
    right: 0;
    height: 0;
    transform: scaleY(0.5);
    border-top: 2px solid $colorBorder;
    z-index: $zIndexHeader;
  }
}

.hb {
  &:before {
    top: auto;
    bottom: 0;
  }
}

.htb {
  @extend %hairline-basic;
  &:before,
  &:after {
    right: 0;
    height: 0;
    transform: scaleY(0.5);
    border-top: 2px solid $colorBorder;
  }
  &:after {
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    box-sizing: border-box;
    content: '';
  }
}

.hl,
.hr {
  @extend %hairline-basic;
  &:before {
    width: 0;
    bottom: 0;
    transform: scaleX(0.5);
    border-left: 1px solid $colorBorder;
  }
}

.hr {
  &:before {
    left: auto;
    right: 0;
  }
}

.h-all {
  @extend %hairline-basic;
  &:before {
    width: 200%;
    height: 200%;
    transform-origin: left top;
    transform: scale(0.5);
    border: 1px solid $colorBorder;
  }
}

/* 边框*/
.bd-solid {
  border: 1px solid;
}
.bd-dotted {
  border: 1px dotted;
}
.bd-dashed {
  border: 1px dashed;
}

/* flex布局
---------------------------------------------------------------- */
/************ flex container 相关 ************/
.flex {
  display: flex;
}
/* 对齐形式（两个参数分别表示轴方向和垂直轴方向的对齐形式）*/
.flex-center {
  @include flex-content(center, center);
}
.flex-v-c {
  @include flex-content(flex-start, center);
}
.flex-h-c {
  @include flex-content(center);
}
.flex-sa-c {
  @include flex-content(space-around, center);
}
.flex-s-c {
  @include flex-content(space-between, center);
}
.flex-s-s {
  @include flex-content(space-between, space-between);
}
.flex-s-fs {
  @include flex-content(space-between, flex-start);
}
.flex-s-fe {
  @include flex-content(space-between, flex-end);
}
.flex-fs-fe {
  @include flex-content(space-between, flex-end);
}
.flex-fe-c {
  @include flex-content(flex-end, center);
}
/* 换行 */
.flex-wrap {
  @extend %flex-wrap;
}

/* 轴方向-列*/
.flex-d-c {
  @include flex-direction();
}
/************ flex item 相关 ************/
@each $flexNumber in $flexNumberList {
  .flex-#{$flexNumber} {
    flex: #{$flexNumber};
  }
}

@each $flexGrowNumber in $flexNumberList {
  .flex-g-#{$flexGrowNumber} {
    flex-grow: #{$flexGrowNumber};
  }
}

@each $flexShrinkNumber in $flexNumberList {
  .flex-s-#{$flexShrinkNumber} {
    flex-shrink: #{$flexShrinkNumber};
  }
}

/* 定位相关
---------------------------------------------------------------- */

.fixed-bottom {
  @extend %fixed-basic;
  bottom: 0;
  z-index: $zIndexFooter;
}

.has-bottom {
  padding-bottom: 130px;
}

.has-bottom-other {
  padding-bottom: 120px;
}

.fixed-top {
  @extend %fixed-basic;
  top: 0;
  z-index: $zIndexHeader;
}

.has-top {
  padding-top: 88px;
}

.pos-r {
  position: relative;
}
.pos-a {
  position: absolute;
}

/* z-index
---------------------------------------------------------------- */
.z-out {
  z-index: 10;
}
.z-inner {
  z-index: -10;
}

/* 盒模型
---------------------------------------------------------------- */

.db {
  display: block;
}

.dib {
  display: inline-block;
}

.ofh {
  overflow: hidden;
}
.ofs {
  overflow: scroll;
}
.of-x-s {
  overflow-x: scroll;
}
.of-y-s {
  overflow-y: scroll;
}
.of-x-h {
  overflow-x: hidden;
}
.of-y-h {
  overflow-y: hidden;
}

.hide {
  display: none;
}

/* 元素居中
---------------------------------------------------------------- */

.block-center {
  @extend %block-center;
}

.translate-h-c {
  @extend %translate-h-c;
}

.translate-v-c {
  @extend %translate-v-c;
}

/* 外边距
---------------------------------------------------------------- */
/* 所有外边距 */
@each $marginNumber in $marginList {
  .mg-#{$marginNumber} {
    margin: #{$marginNumber}px;
  }
}

/* top-bottom外边距 */
@each $marginTopAndBottomNumber in $marginList {
  .mtb-#{$marginTopAndBottomNumber} {
    margin-top: #{$marginTopAndBottomNumber}px;
    margin-bottom: #{$marginTopAndBottomNumber}px;
  }
}

/* top外边距 */
@each $marginTopNumber in $marginList {
  .mt-#{$marginTopNumber} {
    margin-top: #{$marginTopNumber}px;
  }
}

/* bottom外边距 */
@each $marginBottomNumber in $marginList {
  .mb-#{$marginBottomNumber} {
    margin-bottom: #{$marginBottomNumber}px;
  }
}

/* left-right外边距 */
@each $marginLeftAndRightNumber in $marginList {
  .mlr-#{$marginLeftAndRightNumber} {
    margin-left: #{$marginLeftAndRightNumber}px;
    margin-right: #{$marginLeftAndRightNumber}px;
  }
}

/* left外边距 */
@each $marginLeftNumber in $marginList {
  .ml-#{$marginLeftNumber} {
    margin-left: #{$marginLeftNumber}px;
  }
}

/* right外边距 */
@each $marginRightNumber in $marginList {
  .mr-#{$marginRightNumber} {
    margin-right: #{$marginRightNumber}px;
  }
}

/* 内填充padding
---------------------------------------------------------------- */
/* 所有内填充 */
@each $paddingNumber in $paddingList {
  .pd-#{$paddingNumber} {
    padding: #{$paddingNumber}px;
  }
}

/* top-bottom内填充 */
@each $paddingTopAndBottomNumber in $paddingList {
  .ptb-#{$paddingTopAndBottomNumber} {
    padding-top: #{$paddingTopAndBottomNumber}px;
    padding-bottom: #{$paddingTopAndBottomNumber}px;
  }
}

/* top内填充 */
@each $paddingTopNumber in $paddingList {
  .pt-#{$paddingTopNumber} {
    padding-top: #{$paddingTopNumber}px;
  }
}

/* bottom内填充 */
@each $paddingBottomNumber in $paddingList {
  .pb-#{$paddingBottomNumber} {
    padding-bottom: #{$paddingBottomNumber}px;
  }
}

/* left-right内填充 */
@each $paddingLeftAndRightNumber in $paddingList {
  .plr-#{$paddingLeftAndRightNumber} {
    padding-left: #{$paddingLeftAndRightNumber}px;
    padding-right: #{$paddingLeftAndRightNumber}px;
  }
}

/* left内填充 */
@each $paddingLeftNumber in $paddingList {
  .pl-#{$paddingLeftNumber} {
    padding-left: #{$paddingLeftNumber}px;
  }
}

/* right内填充 */
@each $paddingRightNumber in $paddingList {
  .pr-#{$paddingRightNumber} {
    padding-right: #{$paddingRightNumber}px;
  }
}

/* 行高
---------------------------------------------------------------- */
@each $lineHeight in $lineHeightList {
  .lh-#{$lineHeight} {
    line-height: #{$lineHeight}px;
  }
}

/* 圆角
---------------------------------------------------------------- */
@each $borderRadius in $borderRadiusList {
  .br-#{$borderRadius} {
    border-radius: #{$borderRadius}px;
  }
}

@each $borderRadius in $borderRadiusList {
  .btlr-#{$borderRadius} {
    border-top-left-radius: #{$borderRadius}px;
  }
}
@each $borderRadius in $borderRadiusList {
  .btrr-#{$borderRadius} {
    border-top-right-radius: #{$borderRadius}px;
  }
}
@each $borderRadius in $borderRadiusList {
  .bblr-#{$borderRadius} {
    border-bottom-left-radius: #{$borderRadius}px;
  }
}
@each $borderRadius in $borderRadiusList {
  .bbrr-#{$borderRadius} {
    border-bottom-right-radius: #{$borderRadius}px;
  }
}

.br-full {
  border-radius: 100%;
}

/* 文本相关
---------------------------------------------------------------- */
/* 文本大小 */
@each $fontSize in $fontSizeList {
  .fs-#{$fontSize} {
    font-size: #{$fontSize}px;
  }
}

/* 文本字间距 */
@each $letterSpacing in $letterSpacingList {
  .ls-#{$letterSpacing} {
    letter-spacing: #{$letterSpacing}px;
  }
}

/* 文本粗细 */
@each $fontWeight in $fontWeightList {
  .fw-#{$fontWeight} {
    font-weight: #{$fontWeight};
  }
}
.fw-t {
  font-weight: thin;
}
.fw-n {
  font-weight: normal;
}
.fw-b {
  font-weight: bold;
}
.fw-br {
  font-weight: bolder;
}

/* 文本对齐 */

.tal {
  text-align: left;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

/* 显示一行文本 超出部分使用省略号 */
.text-show-line-1 {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
/* 显示两行文本 超出部分使用省略号 */
.text-show-line-2 {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 显示3行文本 超出部分使用省略号 */
.text-show-line-3 {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
/* 显示4行文本 超出部分使用省略号 */
.text-show-line-4 {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
/* 文本行高 */

.lh-xxs {
  line-height: 1;
}

.lh-xs {
  line-height: 1.3;
}

.lh {
  line-height: 1.5;
}

.lh-md {
  line-height: 1.8;
}

.lh-lg {
  line-height: 2;
}

/* 文本颜色 */

.color-primary {
  @include color-primary();
}

.color-second {
  @include color-second();
}

.color-warning {
  color: $orange;
}

.color-danger {
  color: $red;
}

.color-deep {
  color: $deepred;
}

.color-success {
  color: $green;
}
.color-unionpay {
  color: $unionpay;
}
.color-bluepurple {
  color: $bluepurple;
}
.color-blue {
  color: $blue;
}
.color-black {
  color: $black;
}

.color-dark {
  color: $color3;
}

.color-gray {
  color: $color6;
}

.color-gray-light {
  color: $color9;
}

.color-white {
  color: #fff;
}

.color-link {
  color: $colorLink;
}

.color-shadow {
  color: $colorC;
}

.color-selfgray {
  color: $selfgray;
}

.color-tagorg {
  color: $tsgorg;
}

.color-group {
  color: #fe4b00;
}

.color-gray7 {
  color: $gray7;
}

.color-gray5 {
  color: $gray5;
}
.color-black2 {
  color: #2a2d33;
}
.color-primary1 {
  color: $physio-primary1;
}
.color-primary2 {
  color: #f17fd2;
}
.color-primary3 {
  color: #ec612a;
}
/* 文本截断 */

.toe {
  @include ellipsis();
}

.toe-lines-2 {
  @include ellipsis-lines(2);
}

.toe-lines-3 {
  @include ellipsis-lines(3);
}

/* 文本修饰 */

.tdul {
  text-decoration: underline;
}

.tdlt {
  text-decoration: line-through;
}

/* 垂直对齐
---------------------------------------------------------------- */

.vam {
  vertical-align: middle;
}

.vat {
  vertical-align: top;
}

.vab {
  vertical-align: bottom;
}

/* 浮动相关
---------------------------------------------------------------- */

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix {
  &::before,
  &::after {
    content: '';
    display: table;
  }
  &::after {
    clear: both;
  }
}

/* 背景相关
---------------------------------------------------------------- */

.bg-white {
  background-color: #fff;
}

.bg-gray {
  background-color: $colorF5;
}
.bg-gray-1 {
  background-color: #ebebebff;
}
.bg-ef {
  background-color: $colorEF;
}
.bg-primary {
  @include bg-primary();
}
.bg-newcart {
  background-color: #fe4b00;
}

.bg-second {
  @include bg-second();
}

.bg-success {
  background-color: $green;
}

.bg-danger {
  background-color: $red;
}

.bg-warning {
  background-color: $orange;
}

.bg-blue {
  background-color: $blue;
}

.bg-blue-light {
  background-color: $lightBlue;
}

.bg-dark {
  background-color: $color3;
}
.bg-f9 {
  background-color: $colorF9;
}
.bg-f7 {
  background-color: $colorF7;
}
.bg-fa {
  background-color: #fafafa;
}
.bg-c {
  background-color: $colorC;
}

.bg-selfgray {
  background-color: $selfgray;
}

.bg-ffgray {
  background-color: $ffgray;
}

.bg-tagorg {
  background-color: $tsgorg;
}

.bg-tp {
  background-color: transparent;
}

.bg-cover,
.bg-contain {
  background-repeat: no-repeat;
  background-position: center;
}

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}

.bg-physio-primary1 {
  background-color: $physio-primary1;
}

/* 边框颜色
---------------------------------------------------------------- */
.border-primary {
  @include border-primary();
}
.border-second {
  @include border-second();
}
.border-deepred {
  @include border-deepred();
}

/* 去除默认样式
---------------------------------------------------------------- */

.input {
  border: 0;
  background-color: transparent;
  -webkit-appearance: none;
}

/* 状态
---------------------------------------------------------------- */

/* 不可用 */

.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* 宽高100%
---------------------------------------------------------------- */

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

/* 宽度百分比 */
@each $width in $widthList {
  .width-#{$width} {
    width: #{$width};
  }
}
.width-33 {
  width: 33%;
}

/* triangle 三角箭头
---------------------------------------------------------------- */

.icon-t-top {
  @include triangle('top');
}

.icon-t-right {
  @include triangle('right');
}

.icon-t-bottom {
  @include triangle('bottom');
}

.icon-t-left {
  @include triangle('left');
}

/* 图标大小
---------------------------------------------------------------- */
@each $iconSize in $iconSizeList {
  .is-#{$iconSize} {
    width: #{$iconSize}px;
    height: #{$iconSize}px;
    overflow: hidden;
  }
}

/* 位移
---------------------------------------------------------------- */
@each $top in $topList {
  .top-#{$top} {
    top: #{$top}px;
  }
}
@each $bottom in $bottomList {
  .bottom-#{$bottom} {
    bottom: #{$bottom}px;
  }
}
@each $left in $leftList {
  .left-#{$left} {
    left: #{$left}px;
  }
}
@each $right in $rightList {
  .right-#{$right} {
    right: #{$right}px;
  }
}

/* display
---------------------------------------------------------------- */
.dis-inb {
  display: inline-block;
}
.dis-in {
  display: inline;
}
.dis-b {
  display: block;
}

/* 会员等级样式
---------------------------------------------------------------- */
@each $key, $value in $gradeColorlist {
  .grade-#{$key} {
    color: $value;
    background-color: map-get($gradeBgList, $key);
  }
}

/* button
---------------------------------------------------------------- */
.btn-large {
  text-align: center;
  width: 100%;
  line-height: 88px;
  border-radius: 44px;
  font-size: 32px;
  padding: 0;
}
.btn-half {
  text-align: center;
  width: 50%;
  line-height: 88px;
  border-radius: 44px;
  font-size: 32px;
  padding: 0;
}
.btn-middle {
  display: inline-block;
  font-size: 28px;
  line-height: 80px;
  border-radius: 40px;
  width: 300px;
  text-align: center;
  padding: 0;
  // color: $colorF;
}
.btn-small {
  display: inline-block;
  font-size: 26px;
  line-height: 52px;
  border-radius: 26px;
  padding: 0 24px;
  min-width: 130px;
  color: $colorF;
}

@media (max-width: 330px) {
  .fs-20 {
    font-size: 18px;
  }
  .fs-22 {
    font-size: 20px;
  }
  .fs-24 {
    font-size: 22px;
  }
}
.ma {
  margin: 30px;
}
.mt {
  margin-top: 30px;
}
.ml {
  margin-left: 30px;
}
.mr {
  margin-right: 30px;
}
.mb {
  margin-bottom: 30px;
}
.ml15 {
  margin-left: 15px;
}
.greyline1 {
  height: 1px;
  background-color: #ebebeb;
}
.h150px {
  height: 150px;
}
